<template>
  <div class="score-description">
    <basic-container>
      <avue-crud
        :option="option"
        :data="data"
        :page.sync="page"
        @on-load="onLoad"
        :search.sync="search"
        @row-save="rowSave"
        @search-change="searchChange"
        @row-update="rowUpdate"
        @row-del="rowDel"
        @refresh-change="onLoad"
      >
        <template slot-scope="{ type, size }" slot="menu"> </template>

        <template slot="suggestForm" slot-scope="scope">
          <!-- {{ scope }} -->
          <el-row>
            <tinymce-editor
              id="suggest"
              ref="suggest"
              v-model="scope.row.suggest"
            ></tinymce-editor>
          </el-row>
        </template>

        <template slot="explainRemarkForm" slot-scope="scope">
          <!-- {{ scope }} -->
          <el-row>
            <tinymce-editor
              id="explainRemark"
              ref="explainRemark"
              v-model="scope.row.explainRemark"
            ></tinymce-editor>
          </el-row>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import { getScoreList, saveScore, updateScore, deleteScore } from "@/api/scale";
import TinymceEditor from "@/components/tinymce-editor/tinymce-editor";

export default {
  name: "ScoreDescription",
  components: { TinymceEditor },
  props: {
    gaugeId: {
      type: String,
      default: "",
    },
    gaugeFactorId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      user: {},
      search: {},
      promote: true,
      page: {
        pageSize: 20,
      },
      option: {
        addBtnText: "添加得分解释",
        excelBtn: false,
        delBtn: true,
        border: true,
        index: false,
        expandLevel: 3,
        headerAlign: "left",
        align: "left",
        tree: false,
        labelWidth: 100,
        menuWidth: 480,
        column: [
          {
            width: 130,
            label: "最小分数",
            prop: "minScore",
            type: "number",
            span: 8,
            rules: [
              {
                required: true,
                message: "请输入最小分数",
                trigger: "blur",
              },
            ],
          },
          {
            width: 130,
            label: "最大分数",
            prop: "maxScore",
            type: "number",
            span: 8,
            rules: [
              {
                required: true,
                message: "请输入最大分数",
                trigger: "blur",
              },
            ],
          },
          {
            label: "分值说明",
            prop: "explainRemark",
            // type: "textarea",
            slot: true,
            overHidden: true,
            formslot: true,
            span: 24,
            // searchslot: true,
            // search: true,
            rules: [
              {
                required: true,
                message: "请输入分值说明",
                trigger: "blur",
              },
            ],
          },
          {
            label: "辅导建议",
            prop: "suggest",
            // type: "textarea",
            overHidden: true,
            span: 24,
            slot: true,
            rules: [
              {
                required: true,
                message: "请输入辅导建议",
                trigger: "blur",
              },
            ],
          },
          {
            label: "因子结论",
            prop: "totalRemark",
            overHidden: true,
            type: "textarea",
            // slot: true,
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入因子结论",
                trigger: "blur",
              },
            ],
          },
        ],
      },
      data: [
        {
          id: "1",
          name: "张三",
          age: 14,
          grade: 1,
          phone1: "17547400800",
          phone: "17547400800",
          icon: "el-icon-time",
          test: 1,
          sex: "男",
        },
        {
          id: "4",
          name: "王五",
          age: 10,
          grade: 1,
          test: 1,
          sex: "女",
          icon: "el-icon-star-on",
          phone1: "17547400800",
          phone: "17547400800",
        },
      ],
    };
  },
  watch: {
    gaugeFactorId() {
      if (this.gaugeFactorId) {
        this.onLoad();
      }
    },
  },
  methods: {
    async onLoad(page = this.page, params = {}) {
      const { gaugeFactorId, gaugeId } = this;
      //模拟分页
      // this.page.total = 40;
      const {
        data: { data },
      } = await getScoreList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.search, { gaugeFactorId, gaugeId })
      );
      this.data = data.records;

      this.page.total = data.total;
    },
    goToDetailsList() {
      this.$router.push({ name: "试题详情列表" });
    },
    goToResultSet() {
      this.$router.push({ name: "结果列表" });
    },
    handleAdd() {
      this.$router.push({ name: "量表信息" });
    },
    async rowSave(form, done, loading) {
      form.gaugeId = this.gaugeId;
      form.gaugeFactorId = this.gaugeFactorId;
      await saveScore(form);
      loading();

      this.onLoad();

      done(form);
    },
    async searchChange(params, done) {
      await this.onLoad(this.page, params);
      done();
    },
    async rowUpdate(form, index, done, loading) {
      form.gaugeId = this.gaugeId;
      form.gaugeFactorId = this.gaugeFactorId;
      await updateScore(form);
      loading();

      this.onLoad();

      done(form);
    },
    async rowDel(form) {
      await deleteScore({ ids: form.gaugeFactorExplainId });
      this.onLoad(this.page);
    },
  },
};
</script>

<style lang="scss" scoped>
.score-description {
}
</style>
